<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css?v=1.1" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <script src="js/config.js"></script>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="js/component.js?v=10"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style type="text/css">
        .qrcode-wrap{
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background:rgba(0,0,0,.5);
            display:flex;
            justify-content:center;
            align-items: center;
        }
        .qrcode-wrap .qrcode{
            width: 6rem;
            height:6rem;
            position: relative;
        }
        .qrcode-wrap .qrcode .qrcode-close{
            width:1rem;
            height:1rem;
            position:absolute;
            left:50%;
            margin-left:-0.5rem;
            top:-1.5rem;
        }

    </style>
</head>

<body>
    <div id="app">
        <div class="wode-top">
            <div class="wode-yhxx d-f j-c-s">
                <div class="yhxx-left d-f a-c-c">
                    <img :src="userInfo.avatar_url?userInfo.avatar_url:'img/index/touxiang.png'"
                        class="yhxx-toux" />
                    <div class="yhxx-xq">
                        <p class="yhxx-xq-name">{{userInfo.nick_name}}</p>
                        <p class="yhxx-xq-id">ID:{{userInfo.id + 10000}}</p>
                        <p class="yhxx-xq-daka">打卡{{extra.signCountTotal}}天</p>
                    </div>
                </div>
                <div class="yhxx-right">
                    <!-- <div class="yhxx-xiaoxi">
                        <img src="img/wode/icon_my_youjian.png" class="youjian-icon" />
                        <span class="xiaoxi-tag">&nbsp;</span>
                    </div> -->
                    <div class="jifen d-f a-c-c">
                        <img src="img/wode/icon_my_jifen.png" class="jifen-icon" />
                        <span class="jifen-text">0积分</span>
                    </div>
                </div>
            </div>
            <div class="wode-kthy d-f a-c-c j-c-s">
                <img src="img/wode/vip-icon_03.png" class="vip-icon" />
                <template v-if="userInfo.vip">
                    <b class="vip-jstit flex1">有效期至 {{ userInfo.vip.expire }}</b>
                    <a href="/VIP.html" class="vip-ljkt">立即续费</a>
                </template>
                <template v-else>
                    <b class="vip-jstit flex1">VIP介绍</b>
                    <a href="/VIP.html" class="vip-ljkt">立即开通</a>
                </template>
            </div>
        </div>
        <div class="wode-nav">
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('/qiandao.html')">
                <img src="img/wode/icon_my_qiandao.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">本月已签到<span
                        style="color:#09C98E;">{{extra.signCountMonth}}天</span></span>
                <span class="wode-list-extra">
                    <a href="javascript:;" class="qiandao-btn" :style="extra.isSign?'background:silver':''"
                        @click="sign">{{extra.isSign?'已':''}}签到</a>
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('/wodekongjian.html')">
                <img src="img/wode/icon-my_kecheng.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">我的空间</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('kexishezhi.html')">
                <img src="img/wode/icon_my_shezhi.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">科系设置</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('xuexitixing.html')">
                <img src="img/wode/icon_my_tixing.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">学习提醒</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('wodegoumai.html')">
                <img src="img/wode/icon_my_jifen.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">购买记录</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="openQrcode">
                <img src="img/wode/icon_my_wechat.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">加入微信群</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('yonghufankui.html')">
                <img src="img/wode/icon_my_fankui.png?v=1.1" class="wode-list-icon" />
                <span class="wode-list-body flex1">用户反馈</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('zimushezhi.html')">
                <img src="img/wode/icon_my_liiwu.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">字幕设置</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('xitongxiaoxi.html')">
                <img src="img/wode/icon_my_duihuan.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">系统消息</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
            <div style="height:2rem;"></div>
            <!--
            <div class="wode-cell-list d-f a-c-c j-c-s" >
                <img src="img/wode/icon_my_shouc.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">收藏</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
            <div class="wode-cell-list d-f a-c-c j-c-s" >
                <img src="img/wode/icon_my_duihuan.png" class="wode-list-icon" />
                <span class="wode-list-body flex1">兑换码</span>
                <span class="wode-list-extra">
                    <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                </span>
            </div>
             -->
        </div>
        <footbox active="wode"></footbox>

        <div class="qrcode-wrap" v-if="showQrcode">
            <div class="qrcode">
                <img src="img/wode/close.png" class="qrcode-close" @click="closeQrcode"/>
                <img src="img/wode/qrcode.jpeg?v=1.1" />
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    userInfo: {
                        avatar_url:'',
                        nick_name:'',
                        id:'',
                        vip:{
                            expire:''
                        }
                    },
                    extra: {},
                    showQrcode:false,
                }
            },
            created() {
                this.getUser()
                this.getExtra()
            },
            mounted() {
            },
            methods: {
                sign() {
                    if (this.extra.isSign) {
                        return
                    }
                    axios.get('/mp/wechatUser/sign').then(res => {
                        // console.log('nvkfnj' + res);
                        if (res.status == 200) {
                            this.extra.isSign = 1
                            this.extra.signCountTotal++
                            this.extra.signCountMonth++
                        }
                    });
                },
                getUser() {
                    axios.get("/mp/wechatUser/getUserInfo").then(res => {
                        this.userInfo = res.data;
                    });
                },
                getExtra() {
                    axios.get('/mp/wechatUser/getExtra').then(res => {
                        this.extra = res.data;
                    });
                },
                remindStudy() {
                    axios.get('/mp/wechatUser/remindStudy').then(res => {
                        if (res.status == 200) {
                            this.userInfo.remind_study = res.data.remind_study;
                        }
                    });
                },
    
                goTo(url) {
                    window.location.href = url;
                },
                closeQrcode(){
                    this.showQrcode = false
                },
                openQrcode(){
                    this.showQrcode = true
                }
            }
        })
    
    </script>
</body>


</html>